<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 100px;
			background-color: pink;
			opacity: 0.3;
		}
	</style>
</head>
<body>
	<div id="box">
	</div>
</body>
<script src="JS/MyAnimation.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	window.onload = function(){
		var box = document.getElementById('box')
		box.onmouseover = function(){
			trans(box,'width',400,function(){
				trans(box,'height',200,function(){
					trans(box,'opacity',100);
				})
			})
		}
		box.onmouseout = function(){
			trans(box,'opacity',30,function(){
				trans(box,'height',100,function(){
					trans(box,'width',200);
				})
			})
		}
	}
</script>
</html>